<!--
 * @Description: 计算处理后的表头渲染单元格
 * @version:
 * @Author: E-CHOOSEUS R&D
 * @LastEditors: E-CHOOSEUS R&D
-->
<template>
  <section
    class="icr-computedRenderTitle"
    :class="{ 'inline-block': inlineBlock }"
  >
    <div
      class="titleText"
      :style="{ height: column.renderH + 'px', width: column.width + 'px' }"
    >
      <div
        v-for="(item, index) in column.text.split(';')"
        :key="index"
        style="width: 100%"
      >
        {{ item }}
      </div>
    </div>
    <section v-if="column.columns.length" class="subColumnsRow block">
      <component
        :is="'ComputedRenderTitle'"
        v-for="(item, idx) in column.columns"
        :key="idx"
        :column="item"
        inline-block
      />
    </section>
  </section>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ComputedRenderTitle',
  props: {
    column: {
      type: Object,
      default: null
    },
    inlineBlock: {
      type: Boolean,
      default: false
    }
  }
})
</script>

<style lang="scss" scoped>
.icr-computedRenderTitle {
  box-sizing: border-box;
  display: block;
  vertical-align: top;
  white-space: normal;
  //   overflow: hidden;
}

.titleText {
  vertical-align: middle;
  text-align: center;
  white-space: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

.subColumnsRow {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}
</style>
